<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>滤镜</title>
		
		<style>
			div {
				width: 600px;
				height: 300px;
				background-color: #fff;
				margin: 100px auto;
				position: relative;
				filter: contrast(30);
			}
			
			div p{
				border-radius: 50%;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				filter: blur(10px);
			}
			div p:nth-child(1){
				width: 150px;
				height: 150px;
				background-color: #00f;
				left: 100px;
			}
			div p:nth-child(2){
				width: 100px;
				height: 100px;
				background-color: #0ff;
				right: 100px;
			}
		
		</style>
	</head>
	<body>
		<div>
			<p>
			</p>
			<p></p>
		</div>





		<!-- 
		 filter
			 高斯模糊  blur   默认是0   单位是  px
			 灰度   grayscale  默认  0%     最高  100%
			 亮度  brightness  默认  100%  
			 对比度  contrast  默认  100%
			 阴影    drop-shadow(x,y,模糊半径,阴影颜色)  注意 阴影的范围包含 子元素
			 颜色反转  invert  默认  0%  最高100%
			 颜色饱和度  saturate 默认 100%
			 褐度  sepia  默认  0%   最高 100%  将一张图片 做旧  让它有老照片的效果
			 色相旋转  hue-rotate  默认  0deg
		 -->

	</body>
</html>